<script setup>
import { computed, onMounted, reactive } from 'vue'

const props = defineProps({
  sliderText: {
    type: Array,
    default: () => []
  }
})

const state = reactive({
  number: 0,
  timer: 0
})

//滚动函数
const scrollMove = () => {
  state.timer = setTimeout(() => {
    // state.number++
    if (state.number === props.sliderText.length - 1) {
      state.number = 0
    } else {
      state.number++
    }
    scrollMove()
  }, 3000)
}

//鼠标进入
const mouseEnter = () => {
  clearInterval(state.timer)
}

//鼠标离开
const mouseLeave = () => {
  scrollMove()
}

const noticeList = computed(() => {
  if (props.sliderText?.length > 0) {
    return {
      id: state.number,
      text: props.sliderText[state.number]
    }
  } else {
    return []
  }
})

onMounted(() => {
  scrollMove()
})
</script>

<template>
  <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
    <div class="ml10">
      <svg-icon color="#333333" className="gonggao" size="30px" />
    </div>
    <transition name="notice-slide">
      <p class="notice-item" :key="noticeList.id">
        {{ noticeList.text }}
      </p>
    </transition>
  </div>
</template>
<style scoped lang="scss">
.notice-box {
  display: flex;
  align-items: center;
  align-items: center;
  width: 100%;
  height: 30px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  //   border: 1px solid rgb(179, 175, 175);
}
.notice-item {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  position: absolute;
  top: -1.25rem;
  left: 60px;
  font-weight: 700;
  font-size: 18px;
  text-align: left;

  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 44px;
  // color: aqua;
}
.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 5s linear;
}
.notice-slide-enter {
  opacity: 0.01;
  top: 20.625rem;
}
.notice-slide-leave-to {
  top: -31.25rem;
  opacity: 1;
}
</style>
